<template>
	<div class="home">
		<img alt="Vue logo" src="../assets/logo.png" />
        <div>数量测试 {{num}}</div>
        <div>{{obj.name}}</div>
        <button @click="changeNum">增加数量</button>
        <button @click="changeUserName">修改名字</button>
	</div>
</template>

<script lang="ts">
import { defineComponent,ref ,reactive} from "vue";

export default defineComponent({
	name: "HomeView",    
    setup () {
        const num = ref(0);
        const obj = reactive({
                name:"天",
                passWord:"123456"
            })
        const changeNum = () =>{
            num.value++
        }
        const changeUserName = ()=>{
            obj.name = "ruantian";
        }

        return {
            num,
            changeNum,
            changeUserName,
            // ...toRefs(obj)
            obj
        }
    }
});
</script>
